<template>
  <div>
    <h1>公园卫生信息管理</h1>

    <hr />
  </div>
  <div>
    <el-form :model="search" ref="form" label-width="60px" :inline="false" size="normal">
      <div class="flex">
        <el-form-item label="设施名称：" label-width="90px">
          <el-input v-model="search.name" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </div>
      <div class="flex justify-between ml-0" style="width: 100%">
        <el-button type="danger" @click="handleMUchDel">批量删除</el-button>
        <el-button type="primary" @click="handleDrawer(null)">新增</el-button>
      </div>
    </el-form>
    <el-table
      :data="healthData"
      border
      stripe
      label-width="100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" />
      <el-table-column label="设施名称" prop="name" />
      <el-table-column label="设施类型" prop="type" />
      <el-table-column label="设施位置" prop="position" />
      <el-table-column label="服务半径(km)" prop="radius" />
      <el-table-column label="备注" prop="remark" />
      <el-table-column label="设施状态" prop="status" />
      <el-table-column label="操作" width="150px">
        <template #default="scope">
          <div class="flex">
            <el-button type="primary" size="small" @click="handleDrawer(scope.row)">编辑</el-button>
            <el-popconfirm title="你真的要删除嘛?" @confirm="handleDel(scope.row, scope.$index)">
              <template #reference>
                <el-button v-permit type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex justify-center mt-10">
      <el-pagination
        v-model:current-page="current"
        v-model:page-size="pageSize"
        :page-sizes="[10, 100, 200]"
        :small="false"
        :disabled="false"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-drawer
      :title="rowData ? '编辑' : '新增'"
      v-model="drawer"
      direction="rtl"
      size="60%"
      destroy-on-close
    >
      <AddForm :edata="rowData" @update:table-data="handleUpdate" />
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { reactive } from 'vue'
import { parkHealthDel, parkHealthGet } from '../../api/ParkHealth/index'
import AddForm from './Component/add_form.vue'
import { healthDataType } from './types/health'

// 模糊搜索

const search = reactive({
  name: ''
})

const handleSearch = async () => {
  console.log(search)
  current.value = 1 //重新回到第一页
  let res = await parkHealthGet(1, pageSize.value, search)
  // parkData.value = res.data.results
  let { results, count } = res.data
  healthData.value = results
  total.value = count
}
// 重置
const handleReset = () => {
  search.name = ''
  healthData.value = res.data.results
}

// 数据包
const healthData = ref<Array<healthDataType | null>>([])
const total = ref<number>(0)
let res = await parkHealthGet()
let { results, count } = res.data
console.log('111', res, healthData)
healthData.value = results
total.value = count
const drawer = ref<boolean>(false)

// 编辑
const rowData = ref<healthDataType | null>(null) //存放新增、编辑的数据包
const handleDrawer = (row: healthDataType | null) => {
  console.log('区分新增、编辑', row)
  drawer.value = true
  rowData.value = row
}

const handleUpdate = (newhealth: healthDataType) => {
  drawer.value = false
  if (rowData.value) {
    // 编辑后,更新本地列表
    for (let i = 0; i < healthData.value.length; i++) {
      if (healthData.value[i]!.objectId == newhealth.objectId) {
        healthData.value[i] = newhealth
      }
    }
  } else {
    // 新增后,更新本地列表
    // console.log('123', newhealth);
    healthData.value.push(newhealth)
  }
}
// 删除事件
const handleDel = (row: healthDataType, idx: number) => {
  console.log('删除', row, idx)
  parkHealthDel(row.objectId).then(async () => {
    healthData.value.splice(idx, 1) //删除本地
    let res = await parkHealthGet()
    let { results, count } = res.data
    console.log('111', res, healthData)
    healthData.value = results
    total.value = count
  })
}

// 批量删除
const mutipleSelection = ref([])
const handleSelectionChange = (val: any) => {
  mutipleSelection.value = val
}
const handleMUchDel = () => {
  mutipleSelection.value.forEach((row) => {
    const idx = healthData.value.indexOf(row)
    handleDel(row, idx)
  })
}

// 分页
const current = ref<number>(1)
const pageSize = ref<number>(10)
const handleSizeChange = async () => {
  current.value = 1 //重新回到第一页
  let res = await parkHealthGet(1, pageSize.value, search)
  healthData.value = res.data.results
}
const handleCurrentChange = async (page: number) => {
  let res = await parkHealthGet(page, pageSize.value, search)
  healthData.value = res.data.results
}
</script>

<style scoped></style>
